<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
<%@	taglib prefix="t" uri="/struts-tags" %>
<%@ taglib prefix="sj" uri="/struts-jquery-tags" %>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js" ></script> 
<script>
	function validarNro(e) {
		var key;
		if(window.event) // IE
				{
				key = e.keyCode;
				}
		else if(e.which)
				{
				key = e.which;
				}
		if (key < 48 || key > 57)
			    {
			    if(key == 8){
			    	return true;
			        document.getElementById('error').innerHTML="";
			    }else{
			    	document.getElementById('error').innerHTML="Solo se permite ingresar numeros";
			    	return false;
			    }    
		 }
		document.getElementById('error').innerHTML="";
		return true;
	}

</script>

<style type="text/css">
label.error{
color: red;
}
</style>
 
<sj:head jqueryui="true" jquerytheme="smoothness"/>
<h3>GENERAR HISTORIA CLINICA</h3>
<t:form id="formDatos" namespace="/operaciones" action="generarhc" theme="simple" >
<t:actionmessage/>
	<div id="cabDatosHC" class="mb10 bordeSeccion">
		<label>Nro. Historia Clinica:</label>
		<t:textfield id="nrohc" name="historiaclinica.idhistoriaclinica" 
					readonly="true" disabled="true" theme=""/>
		<label>Fecha creación:</label>
		<t:textfield id="hcfeccrea" name="historiaclinica.fechape" 
					readonly="true" disabled="true"/>
	</div>
	<div id="cabDatosPersonal" class="mb10 bordeSeccion">
		<h4>Datos del Paciente</h4>
		<div>
				<table class="tablaformulario">
				 	<tr>
						<td><label>Codigo:</label></td>
						<td><t:textfield id="codpaciente" name="codacop" disabled="true" theme="simple"/></td>
						<td><label>Sexo:</label></td>
						<td>
							<t:select id="sexopaciente" cssClass="required" name="historiaclinica.sexo" list="sexos" theme="simple" />
						</td>
						<td><label>Fecha de Nacimiento:</label></td>
						<td><sj:datepicker value="today" name="historiaclinica.fecnac" theme="simple"/>
						</td>
					 </tr>
					 <tr>
				 		<td><label>Nombre:</label></td>
						<td><t:textfield id="nombrepaciente" name="historiaclinica.nombres" theme="simple"/></td>
						<td><label>Estado Civil:</label></td>
					    <td>	
					    	<t:select id="estadocivilpaciente" name="historiaclinica.estacivil" list="estados" theme="simple" />
					    </td>
				 	</tr>
				 	<tr>
				 		<td><label>Apellido Paterno:</label></td>
						<td>
						<t:textfield id="apepatpaciente" name="historiaclinica.apepat" theme="simple"/></td>
						<td><label>Ocupación:</label></td>
						<td><t:textfield id="ocupacionpaciente" name="historiaclinica.ocupacion" theme="simple"/></td>
				 	</tr>
				 	<tr>
						 <td><label>Apellido Materno:</label></td>
						 <td><t:textfield id="apematpaciente" name="historiaclinica.apemat" theme="simple"/></td>
						 <td><label>Tipo de Documento:</label></td>
						 <td>
						 	<t:select id="tipodocpaciente" name="historiaclinica.tipodoc" list="documentos" theme="simple"/>
						 </td>
						 <td><label>Nro. Documento:</label></td>
						 <td><t:textfield id="nrodocpaciente" name="historiaclinica.nrodoc" cssClass="required Numero" maxLength="8" theme="simple"/></td>
				 	</tr>
				 	<tr>

				 	</tr>			 			 			 
				</table>
		</div>
		<div>
		
		</div>
	</div>
	<div id="cabDatosContacto" class="mb10 bordeSeccion">
		<h4>Datos de Contacto</h4>
		<table class="tablaformulario" >
			<tr>
				<td><label>Telefono casa:</label></td>
				<td><t:textfield id="tlfcasapaciente" name="historiaclinica.tlfcasa" cssClass="required Numero" maxLength="7" theme="simple" onkeypress="javascript:return validarNro(event)"/></td>
				<td><label>Nombre de familiar:</label></td>
				<td><t:textfield id="familiarpaciente" name="historiaclinica.acompanante" cssClass="required Letra" theme="simple"/></td>
			</tr>
			<tr>
				<td><label>Celular:</label></td>
				<td><t:textfield id="celularpaciente" name="historiaclinica.celular" cssClass="required Numero" maxLength="9" theme="simple"/></td>
				<td><label>Telefono:</label></td>
				<td><t:textfield id="telefonofamiliarpaciente" name="historiaclinica.tlfacompanante" cssClass="required Numero" maxLength="7" theme="simple"/></td>
			</tr>
		</table>
	</div >
	
	<div id="cabDatosUbicacion" class="mb10 bordeSeccion">
		<h4>Datos de Ubicación</h4>
		<table class="tablaformulario" >
			<tr>
				<td><label>Dirección:</label></td>
				<td><t:textfield id="direccionpaciente" name="historiaclinica.direccion" cssClass="inputM" theme="simple"/></td>
			</tr>
		</table>
	</div>
	<div align="center">
		<t:submit value="Grabar" method="registrar"/>
		<t:submit value="Salir" method="salir"/>
	</div>
	
</t:form>


<script type="text/javascript">


	

$("#grabarHC").click(function(e){
	e.preventDefault();	
	if($("form").valid()){	 	
	$.ajax({
		url:'grabarHC.do',
		data:$("#formDatos").serialize(),
		cache:false,
		success:function(html){
			$("#panelcuerpo-cen").html(html);
		}
	});
	}else{	alert("Debe ingresar los datos correctamente");}
	
});

</script>